<template>
  <div class="PeoInfo" id="PeoInfo">
    <div class="onLogin">
      <div class="PeoInfo-Hd">
        <img
            :src="
            isLogin === true
              ? info.photo
              : 'https://img0.baidu.com/it/u=2050433444,4176032377&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
          "
        />
      </div>
      <a href="javascript:;" class="PeoInfo-Name" :title="info.nickname">{{
          isLogin === true ? info.nickname : "游客"
        }}</a>
      <h6 :title="info.introduce">{{ info.introduce }}</h6>
      <div class="span" v-if="true">
        <a class="home" @click="jumpToMyInfo">
          <span></span>
          <span>主页</span>
        </a>
        <a class="collection" href="javascript:;">
          <span></span>
          <span>收藏</span>
        </a>
      </div>
      <div class="myFriend" v-if="isLogin === true">
        <h3>我的关注</h3>
        <div :class="myFriendList" id="myFriendList">
          <router-link
              class="myFriendListItem"
              v-for="(list, i) in myFriendListDetail"
              :key="i"
              :to="{ name: 'Friend', params: { FriendId: list.id } }"
              :title="list.name"
              :FriendId="list.id">
            <img :src="list.logo"/>
            <span :title="list.name">{{ list.name }}</span>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "PeoInfo",
  //props: [],
  data: function () {
    return {
      info: {},
      isLogin: false,
      myFriendListDetail: [],
      id: 0
    };
  },
  methods: {
    jumpToMyInfo() {
      if (this.id !== 0)
        this.$router.push("/myinfo/" + this.id)
    }
  },
  created: async function () {
    var info
    try {
      var response = await this.$http.post('/api/user/authorize')
      console.log(response)
      var result = response.data
      var success = result.success
      if (success) {
        this.isLogin = true
        var data = result.data
        info = {
          introduce: "关注嘉然、顿顿解馋",
          nickname: data.userName,
          level: data.level,
          photo: data.picture,
          id: data.userId
        }
        this.info = info;
        this.id = data.userId
      } else {
        await this.$alert("登录过期，请重新登录")
        this.$router.push("/login")
      }
    } catch (error) {
      info = {
        introduce: "关注嘉然、顿顿解馋",
        nickname: "嘉然",
        photo:
            "https://img0.baidu.com/it/u=2050433444,4176032377&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      };
      this.info = info;
      this.isLogin = true;
      //   }
      // })
      // vm.$http({
      //   url: '//moment.snail.com/api/v1/user/my-Friends',
      //   method: 'jsonp',
      //   jsonp: 'callback',
      //   emulateJSON: true,
      //   headers: {
      //     'Content-Type': 'x-www-from-urlencoded'
      //   }
      // }).then(function (res) {
      //   if (res.data.code === 200) {
    } finally {
      var list = [
        {
          logo: "https://img0.baidu.com/it/u=2050433444,4176032377&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          id: 114514,
          name: "夹心糖",
        }, {
          logo: "https://img0.baidu.com/it/u=2050433444,4176032377&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          id: 114514,
          name: "夹心糖",
        }, {
          logo: "https://img0.baidu.com/it/u=2050433444,4176032377&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          id: 114514,
          name: "夹心糖",
        }, {
          logo: "https://img0.baidu.com/it/u=2050433444,4176032377&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          id: 114514,
          name: "夹心糖",
        }, {
          logo: "https://img0.baidu.com/it/u=2050433444,4176032377&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          id: 114514,
          name: "夹心糖",
        }, {
          logo: "https://img0.baidu.com/it/u=2050433444,4176032377&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          id: 114514,
          name: "夹心糖",
        }, {
          logo: "https://img0.baidu.com/it/u=2050433444,4176032377&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          id: 114514,
          name: "夹心糖",
        }, {
          logo: "https://img0.baidu.com/it/u=2050433444,4176032377&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          id: 114514,
          name: "夹心糖",
        },
      ];
      this.myFriendListDetail = list;
      if (list.length >= 7) {
        var newlist = [
          list[0],
          list[1],
          list[2],
          list[3],
          list[4],
          list[5],
          list[6],
        ];
        this.myFriendListDetail = newlist;
      }
    }
    document.getElementById("myFriendList").style.height = this.myFriendListDetail.length / 2 + 'px';
    //   }
    // })
  },
};
</script>
<style scoped>
.PeoInfo {
  padding-top: 1px;
  background: rgb(255, 255, 255) url(../images/peobg.png) no-repeat center top;
  height: 500px;
}

.PeoInfo-Hd {
  padding-top: 0px;
  width: 70px;
  height: 70px;
  border: 2px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  margin: 55px auto 15px;
}

.PeoInfo-Hd img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

.PeoInfo-Name {
  display: inline-block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
  font-family: "Microsoft YaHei";
  color: #404040;
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
  text-decoration: none;
}

.PeoInfo-Name:hover {
  color: #0099e5;
}

.PeoInfo-GoLogin {
  font-size: 24px;
  color: #333;
  width: 100%;
  text-align: center;
  margin: 30px auto;
}

.PeoInfo h6 {
  font-size: 14px;
  font-family: "Microsoft YaHei";
  color: gray;
  height: 20px;
  overflow: hidden;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  margin-top: 10px;
  line-height: 1.3;
  margin-bottom: 20px;
}

.PeoInfo .span {
  height: 35px;
  width: 100%;
  text-align: center;
}

.PeoInfo .span a {
  display: inline-block;
  height: 35px;
  width: 83px;
  text-align: center;
  font-size: 14px;
  font-family: "Microsoft YaHei";
  color: #4d4d4d;
  text-decoration: none;
}

.PeoInfo .span a:hover {
  color: #0099e5;
}

.PeoInfo .collection {
  border-right: 4px solid #f5f7f8;
  border-left: 4px solid #f5f7f8;
}

.PeoInfo .home {
  border-left: 4px solid #f5f7f8;
}

.PeoInfo a span:first-child {
  display: inline-block;
  margin-bottom: 5px;
}

.PeoInfo .home span:first-child {
  width: 100%;
  height: 16px;
  background: url(../images/home.png) no-repeat center;
}

.PeoInfo .collection span:first-child {
  width: 100%;
  height: 17px;
  background: url(../images/sc.png) no-repeat center;
}

.PeoInfo .home:hover span:first-child {
  width: 100%;
  height: 16px;
  background: url(../images/home_hover.png) no-repeat center;
}

.PeoInfo .collection:hover span:first-child {
  width: 100%;
  height: 17px;
  background: url(../images/sc_hover.png) no-repeat center;
}

.PeoInfo .qz:hover span:first-child {
  width: 100%;
  height: 16px;
  background: url(../images/sq_hover.png) no-repeat center;
}

.hfixed .myFriend {
  display: none;
}

.myFriendHeight {
  height: 140px;
}

.myFriend {
  width: 240px;
  border-top: 4px solid #f5f7f8;
  margin: 0 auto;
  margin-top: 25px;
}

.myFriend .myFriendList {
  overflow: hidden;
}

.myFriend h3 {
  font-size: 17px;
  font-family: "Microsoft YaHei";
  color: #404040;
  margin-bottom: 10px;
}

.myFriend .myFriendListItem {
  width: 105px;
  height: 30px;
  margin-bottom: 10px;
}

.myFriend .myFriendListItem img {
  float: left;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  padding-left: 15px;
  padding-bottom: 10px;
}

.myFriend .myFriendListItem span {
  float: left;
  display: inline-block;
  width: 65px;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-family: "Microsoft YaHei";
  color: gray;
  text-align: left;
  padding-bottom: 10px;
}
</style>